<template>
	<view class="content">
		<zaudio theme="theme1" v-show="businessAudioDetail.voiceUrl"></zaudio>
		<view class="listbox" v-show="businessAudioDetail.voiceUrl">
			<view style="padding:10px">音频列表:</view>
			<view v-for="(i, k) in audiolist" :key="k" class="list">
				{{ i.title.length > 12 ? i.title.substring(0, 12) + "..." : i.title }}
				<!-- <button size="mini" @click="go(k)">查看详情</button> -->
				<button size="mini" @click="play(k)">{{ !paused && i.src === playinfo.src ? '暂停' : '播放' }}</button>
			</view>
		</view>

		<view class="product-intro">
			<view class="conter" v-html="description"></view>
		</view>
	</view>
</template>

<script>
	import zaudio from '@/components/uniapp-zaudio/zaudio';
	import {
		getBusinessAudio
	} from "@/api/public";
	export default {
		data() {
			return {
				id: '',
				audiolist: this.$zaudio.audiolist, //当前音频列表
				playIndex: this.$zaudio.playIndex, //当前播放的索引
				paused: this.$zaudio.paused, //当前是否暂停
				playinfo: this.$zaudio.playinfo, //当前播放的信息
				businessAudioDetail: {},
				description: '',
				banner: []
			};
		},
		components: {
			zaudio
		},
		onLoad() {
			this.id = this._route.query.id;
			this.lodINdexData()
			this.$zaudio.on('stop', 'even_stop', function() {
				console.log('我是强制暂停或关闭小程序音频浮窗触发的')
			})
			this.$zaudio.on('seek', 'even_seek', function(time) {
				console.log('进度拖动A', time)
			})
		},
		onShow() {
			//实时渲染当前的播放状态
			this.$zaudio.syncRender()
			console.log("进入页面")
			//实时获取当前播放状态
			this.$zaudio.syncStateOn('page-index-get-state', ({
				audiolist,
				playIndex,
				paused,
				playinfo
			}) => {
				this.audiolist = audiolist;
				this.playIndex = playIndex;
				this.paused = paused;
				this.playinfo = playinfo;
			});
		},
		beforeDestroy() {
			console.log("准备离开")
			//卸载不需要的业务和获取播放状态的业务,提高页面性能
			this.$zaudio.syncStateOff('page-index-get-state');
			this.$zaudio.stop()
			this.$zaudio.off('stop', 'even_stop');
			this.$zaudio.off('seek', 'even_seek');
		},
		destroyed() {
			console.log("已经离开")
		},
		methods: {
			play(key) {
				//播放或暂停
				this.$zaudio.operate(key);
			},
			lodINdexData() {
				let that = this;
				getBusinessAudio(this.id).then((res) => {
					console.log(res.data.detail)
					that.$set(that, "businessAudioDetail", res.data.detail)
					that.description = res.data.detail.description.replace(
						/\<img/gi,
						'<img style="max-width:100%;height:auto;"'
					);
					if(that.businessAudioDetail){
						that.asyncSetAudio()
					}
				});
			},
			asyncSetAudio() {
				let _src = this.businessAudioDetail.voiceUrl;
				let _title = this.businessAudioDetail.titleName;
				let _singer = this.businessAudioDetail.titleInfo;
				let _coverImgUrl = this.businessAudioDetail.image;
				let data = [{
					src: _src,
					title: _title,
					singer: _singer,
					coverImgUrl: _coverImgUrl
				}];
				uni.showLoading({
					title: "加载中",
				});
				setTimeout(() => {
					this.$zaudio.setAudio(data);
					this.$zaudio.setRender(0); //setRender: 用于渲染zaudio, 具体查看文档
					uni.hideLoading()
				}, 1500)
			},
			setRender() {
				this.$zaudio.setRender(1);
			},
			willStop() {
				this.$zaudio.on('playing', 'recharge', info => {
					if (info.current_value > 5) {
						this.$zaudio.stop();
						uni.showModal({
							title: '提示',
							content: '请续费',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				});
			},
			removeStop() {
				this.$zaudio.off('playing', 'recharge');
				this.$zaudio.operate();
			},
			logPlaying(action) {
				// 一个回调事件可以注册多次业务, action用于区分相同回调事件的不同业务
				//例: playing回调时注册 打印事件
				this.$zaudio.on('playing', action, info => {
					console.log('播放中----' + action, info);
				});
			},
			offPlaying(action) {
				//注意解除事件action必须与注册事件的action相同
				this.$zaudio.off('playing', action);
			},
			stepPlay(val) {
				this.$zaudio.stepPlay(val);
			}
		}
	};
</script>

<style scoped lang="scss">
	.listbox {
		margin: 20px 10px 10px;
		border: 1px solid rgba(0, 0, 0, 0.2);

		.list {
			line-height: 40px;
			border-top: 1px solid #ccc;
			padding: 0 10px;

			button {
				float: right;
				margin-top: 5px;
				margin-left: 5px;
			}
		}
	}

	.demo {
		margin-top: 20px;

		button {
			margin: 5px;
		}
	}

	.product-intro {
		margin-top: 0;
		width: 100%;
		background-color: #FFFFFF;
		padding: 30rpx;

		.conter {
			width: 100%;
		}
	}
</style>
